<template>
  <div class="con">
    <el-tag v-for="(tag,index) in tags"
            :key="tag.name"
            closable
            effect="dark"
            @click="golink(tag)"
            @close="goclose(tag,index)"
            :type="href==tag.path?'':'info'"
            :data-index="index"
            @contextmenu.native.prevent="close($event)">
      {{tag.name}}
    </el-tag>
    <ul class="right-menu"
        :style="'left:'+menuLeft+';top:'+menuTop+';'"
        v-show="contextMenuVisible">
      <li @click="closeSelectedTag">关闭当前</li>
      <li @click="closeAllTags">关闭所有</li>
      <li @click="closeOthersTags">关闭其它</li>
      <li @click="closeLeftTags">关闭左侧</li>
      <li @click="closeRightTags">关闭右侧</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      href: '',
      tags: [],
      menuLeft: '',
      menuTop: '',
      tagIndex: 0,
      contextMenuVisible: false,
    }
  },
  watch: {
    $route (to, from) {
      var flag = false
      for (var i = 0; i < this.tags.length; i++) {
        if (this.tags[i].path == to.path) {
          flag = true
          break
        }
      }
      if (!flag) {
        this.tags.push({ name: to.name, path: to.path })
      }
      this.href = to.path
    },
    contextMenuVisible (flag) {
      if (flag) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  mounted () {
    this.href = this.$route.path
    this.tags.push({ name: this.$route.name, path: this.$route.path })
  },
  methods: {
    golink (item) {
      if (this.href !== item.path) this.$router.push(item.path)
    },
    goclose (item, index) {
      if (this.tags[index].path == this.href) {
        this.tags.splice(index, 1)
        if (this.tags[index]) {
          this.href = this.tags[index].path
          this.$router.push(this.href)
        } else if (this.tags[0]) {
          this.href = this.tags[index - 1].path
          this.$router.push(this.href)
        } else {
          this.href = '/';
          this.tags.push({ name: '首页', path: '/' })
          this.$router.push(this.href)
        }
      } else {
        this.tags.splice(index, 1)
      }
    },
    close (event) {
      const e = event || window.event
      const target = e.target
      this.menuLeft = e.layerX + 20 + 'px' // 菜单出现的位置距离左侧的距离
      this.menuTop = e.layerY + 20 + 'px' // 菜单出现的位置距离顶部的距离
      this.tagIndex = Number(target.getAttribute('data-index')) // 获取当前右击菜单的索引。从0开始
      this.contextMenuVisible = true // 显示菜单
    },
    closeSelectedTag () {   //关闭当前
      // this.tags.splice(this.tagIndex,1)
      this.goclose(0, this.tagIndex)
    },
    closeAllTags () {     //关闭所有
      this.href = '/';
      this.tags = [{ name: '首页', path: '/' }];
      this.$router.push(this.href)
    },
    closeOthersTags () {  //关闭其他
      this.tags = [this.tags[this.tagIndex]];
      this.href = this.tags[0].path;
      this.$router.push(this.href)
    },
    closeLeftTags () {   //关闭左侧
      this.tags.splice(0, this.tagIndex)
      this.href = this.tags[0].path;
      this.$router.push(this.href)
    },
    closeRightTags () {    //关闭右侧
      this.tags.splice(this.tagIndex + 1, this.tags.length - this.tagIndex)
      this.href = this.tags[this.tags.length - 1].path;
      this.$router.push(this.href)
    },
    closeMenu () {
      this.contextMenuVisible = false
    }
  }
}
</script>
<style scoped>
.con {
  width: calc(100% - 20px);
  height: 50px;
  padding-left: 20px;
  background: #fff;
  border-top: 3px solid #eeeeee;
  display: flex;
  align-items: center;
}
.el-tag {
  height: 30px;
  margin-left: 20px;
  padding: 0 16px;
  /* background: #EEEFF4; */
  /* color: #808080; */
  border-radius: 15px;
  cursor: pointer;
}
.right-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.con ul {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.con > ul > li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}
.con > ul > li:hover {
  background: #eee;
}
</style>